<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>
    <script>
        function checkName(){
            // let obj={name: getObject("userName").value}
            // //向服务器发送get请求，第一个参数为访问服务器的URL地址
            // //第二个参数为表单数据
            // axios.get("/test/checkName",{params:obj})
            //     //then后面是处理响应对象的，e是响应对象
            //     //将找到的表单信息拿出来做验证
            //     .then(e=>pressName(e.data));
            let pramObj=new URLSearchParams();
            pramObj.append("name",getObject("userName").value)
            axios.post("/test/checkName",pramObj).then(e => {
                pressName(e.data)
                alert(JSON.stringify(e))
            })

        }

        //验证函数
        function pressName(info){
            //info为响应对象的消息体
            if (info=="YES"){
                getObject("infoDiv").innerHTML="可以使用";
                getObject("infoDiv").style.color="green";
            }else {
                getObject("infoDiv").innerHTML="不可以使用";
                getObject("infoDiv").style.color="red";
            }
            console.log(info);
        }

        function getObject(id){
            return document.getElementById(id);
        }
    </script>
</head>
<body>
    <form action="/add">
        用户名:<input type="text" id="userName" name="userName" onblur="checkName()">
        <div id="infoDiv"></div>
        生日:<input type="text" id="birthday" name="birthday">
        <input type="submit" name="添加">
    </form>
</body>
</html>